<template>
	<div class="loading" v-show="v" :style="{opacity:maskOpacity}">
		<div class="title">Loading</div>
		<div class="bar">
			<div class="bar-inner" :style="{width: inier_width+'px'}"></div>
		</div>
		<div class="spinner">
		  <div class="bounce1"></div>
		  <div class="bounce2"></div>
		  <div class="bounce3"></div>
		</div>
		<div class="maker">
			维护合众
		</div>
	</div>
</template>

<script setup lang="ts">
	
	import { ref } from 'vue'
	const inier_width=ref(0);
	const maskOpacity=ref(0);
	const maker=ref('');
	const v=ref(false);
	const show=(tips:string)=>{
		maskOpacity.value=0.8
		inier_width.value=0;
		maker.value=tips;
		v.value=true;
	}
	
	const change=(value:number)=>{
		inier_width.value=value;
	}
	
	const complete=()=>{
		inier_width.value=300;
		maskOpacity.value=0
		v.value=false;
		maker.value='';
	}
	
	defineExpose({
	  show,complete,change
	});
	
</script>

<style scoped>
	
	.loading{
		display: flex;
		align-items: center;
		position: fixed;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 10000;
		font-family: PingFang SC,sans-serif;
		box-shadow: 0 0 10px 0 rgba(14,14,14,.3);
		background-image: url(/src/assets/images/Loading_Mask.png);
		background-size: cover;
		background-repeat: no-repeat;
		opacity: 0;
		transition: opacity 0.3s;
		flex-direction: column;
		background-position-y: 1px;
		background-repeat: no-repeat;
		-moz-user-select:none; /* Firefox私有属性 */
		-webkit-user-select:none; /* WebKit内核私有属性 */
		-ms-user-select:none; /* IE私有属性(IE10及以后) */
		-khtml-user-select:none; /* Khtml内核私有属性 */
		-o-user-select:none; /* Opera私有属性 */
		user-select:none; /* CSS3属性 */
		>.title{
			color: white;
			flex: 0.488;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			margin-bottom: 10px;
			font-size: 20px;
			font-family: fantasy;
		}
		.bar{
			width: 300px;
			height: 4px;
			background: #81818157;
			>.bar-inner{
				height: 4px;
				background-color: white;
				height: 100%;
				width: 0px;
				transition: width 0.3s
			}
		}
		>.maker{
			color: white;
			flex: 0.465;
			display: flex;
			align-items: flex-end;
			align-content: center;
			flex-wrap: nowrap;
			font-family: serif;
			font-size: 13px;
		}
		
		
		.spinner {
		  margin: 5px auto 0;
		  width: 150px;
		  text-align: center;
		}
		 
		.spinner > div {
			width: 10px;
			height: 10px;
			background-color: white;
			border-radius: 3px;
			display: inline-block;
			-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
			animation: bouncedelay 1.4s infinite ease-in-out;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			margin: 2px;
		}
		 
		.spinner .bounce1 {
		  -webkit-animation-delay: -0.32s;
		  animation-delay: -0.32s;
		}
		 
		.spinner .bounce2 {
		  -webkit-animation-delay: -0.16s;
		  animation-delay: -0.16s;
		}
	}
	
	@-webkit-keyframes bouncedelay {
	  0%, 80%, 100% { -webkit-transform: scale(0.0) }
	  40% { -webkit-transform: scale(1.0) }
	}
	 
	@keyframes bouncedelay {
	  0%, 80%, 100% {
	    transform: scale(0.0);
	    -webkit-transform: scale(0.0);
	  } 40% {
	    transform: scale(1.0);
	    -webkit-transform: scale(1.0);
	  }
	}
	
</style>